<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <!-- <link rel="stylesheet" type="text/css" href="C:\Users\86182\Desktop\智感前端\win.css"> -->
        首页
    </title>
</head>
<style>
    body {
        font-family: 'Popins', sans-serif;
        background-color: #4c4177;
        background-image: linear-gradient(315deg, #4c4177 0%, #2a5470 74%);
        color: white;
        height: 100vh;
        overflow: hidden;
    }
    
    .filters {
        margin-top: 50px;
        margin-left: 70px;
    }
    
    .filters ul {
        padding: 0;
    }
    
    .filters ul li {
        list-style: none;
        display: block;
        padding: 15px 10px;
        cursor: pointer;
        position: relative;
        font-size: 17px;
        font-weight: 500;
        color: #fff;
        text-transform: capitalize;
        transition: all 0.3s ease-in-out;
    }
    
    .filters ul li.active .filters ul li:hover {
        color: #5fb759;
    }
    /* 使链接不变色 */
    
    .filters-content .item img {
        width: 100%;
        border: 4px solid white;
    }
    
    a:link {
        color: aliceblue;
    }
    
    a:visited {
        color: #fff;
    }
    
    a {
        text-decoration: none;
    }
    /* 已访问链接 */
    
    #projects {
        padding-top: 60px;
        padding-left: 60px;
    }
    /* @media (max-width: 992px) {
        #projects.filters ul li {
            display: inline-block;
            margin-right: 10px;
            padding: 0px;
        }
    } */
    
    img {
        width: 250px;
        height: 150px;
        border: 4px solid white;
    }
    
    .p1 {
        margin-top: 200px;
    }
    
    #projects .section-heading {
        margin-bottom: 70px;
        margin-left: 70px;
    }
    
    #projects .section-heading h6 {
        color: #5fb759;
        font-size: 15px;
    }
    
    .thick-white-border {
        border-color: #fff;
        border-radius: 50%;
        border-style: solid;
        border-width: 4px;
        width: 70px;
        height: 70px;
        position: absolute;
    }
    
    h4 {
        top: 70px;
        left: 20px;
        position: absolute;
    }
    
    #k {
        color: #5fb759;
    }
    /* #space {
        width: 80%;
        height: 80%;
    } */
</style>

<body>

    <img class="thick-white-border" src="头像.jpg">
    <br>
    <h4>王莹琳</h4>
    <table>
        <th>
            <td width="450">
                <section class="section" id="projects">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="section-heading">
                                    <h6>Personal homepage</h6>
                                    <h2>The sum of the jobs</h2>
                                </div>
                                <div class="filters">
                                    <ul>
                                        <li id="k">All</li>
                                        <li><a href="first.html">第一次作业</a></li>
                                        <li><a href="#">第二次作业</a></li>
                                        <li><a href="#">第三次作业</a></li>
                                        <li><a href="#">第四次作业</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </td>
            <td>
                <br><br><br>
                <a href="first.html" target="next" class="p1"> <img src="第一次作业.png" title="作业一"></a>
                <br><br><br><br>
                <a href="#" target="next"> <img src="2.jpg" title="作业二"></a>
            </td>
        </th>
        <th></th>
        <th>

            <td></td>
            <td>
                <br><br><br>
                <a href="#" target="next"> <img src="3.jpg" title="作业三"></a>
                <br><br><br><br>
                <a href="#" target="next"> <img src="4.jpg" title="作业四"></a>
            </td>
        </th>
    </table>
</body>

</html>